function my$(id) {
    return document.getElementById(id);
}

var carousel = my$("banner")
var ul = my$("banner-img")
var ulLists = ul.children;
var leftBtn = my$("btn-left")
var rightBtn = my$("btn-right")
var ol = my$("thumbs")
var olLists = ol.children;
var index = 0;
leftBtn.onclick = leftClick;
rightBtn.onclick = rightClick;

var timer;
timer = setInterval(rightClick,3000);
// 6.鼠标移上轮播图，停止自动轮播
carousel.onmouseover = function () {
    clearInterval(timer);
};
// 7.鼠标离开轮播图，重新开始自动轮播
carousel.onmouseout = function () {
    timer = setInterval(rightClick,3000);
};

function leftClick() {
    index--;
    if (index < 0) {
        index = ulLists.length - 1;
    // 调用一个切换函数
    change();
    };
}

function rightClick() {
    index++;
    if (index > ulLists.length - 1) {
        index = 0;
    }
    change();
}

for (var i = 0 ; i < olLists.length; i++) {
    // 存储自己的下标
    olLists[i].index = i;
    olLists[i].onclick = function () {
        index = this.index;
        change();
    };
}

function change() {
    for (var i = 0 ; i < ulLists.length ; i++) {
        ulLists[i].className = "";
        olLists[i].className = "";
    }
    ulLists[index].className = "current";
    olLists[index].className = "current";
}